<template>
    <div class="film_body">
        <ul class="list">
            <li class="item" v-for="item in films" :key="item.filmId" @click="goDetail(item.filmId)">
                <div class="pic1">
                    <img :src="item.poster" alt="" />
                </div>
                <div class="info_list">
                    <h2>{{ item.name }}</h2>
                    <p>观众评分<span class="grade">{{ item.grade }}</span></p>
                    <p>主演：{{ formatActors(item.actors) }}</p>
                    <p><span>{{ item.nation }}</span>&nbsp;|&nbsp;<span>{{ item.runtime }}分钟</span></p>
                </div>
                <div class="btn_mall">购票</div>
            </li>
        </ul>
    </div>
</template>

<script lang="ts">

export interface IFilm {
    name: string
    filmId: string,
    poster: string,
    grade: string,
    actors: string,
    nation: string,
    runtime: string,
}

export default {
    name: "Films",

    data() {
        return {
            // 存放接口请求回来的电影列表数据
            films: [],
        };
    },

    // const filmList = ref([]);

    mounted() {
        // 调用 fetchData()
        this.fetchData();
    },

    methods: {

        fetchData() {
            // 请求地址
            const url = `https://m.maizuo.com/gateway?cityId=440300&pageNum=1&pageSize=23&type=1`;

            fetch(url, {
                headers: {
                    "X-Host": "mall.film-ticket.film.list",
                },
            })
                .then((response) => response.json())
                .then((result) => {
                    // console.log(result);
                    // 判断 status （业务编码） 是否为 0
                    if (result.status === 0) {
                        // 将 result.data.films 赋值给 films
                        this.films = result.data.films;
                    } else {
                        alert(result.msg);
                    }
                });
        },


        formatActors(actors: any) {

            const names = actors.map((item: any) => item.name);
            return names.join(" ");
        },

        /* 详情 */
        goDetail(filmId: any) {
            console.log('详情')
            // 编程式跳转页面
            this.$router.push({ name: "detail", params: { id: filmId } });
        },
    },
};
</script>

<style lang="scss" scoped>
.film_body {
    flex: 1;
    overflow: auto;

    .list {
        margin: 0 12px;
        overflow: hidden;

        .item {
            margin-top: 12px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #e6e6e6;
            padding-bottom: 10px;

            .pic1 {
                width: 64px;
                height: 90px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .info_list {
                margin-left: 10px;
                flex: 1;
                position: relative;

                h2 {
                    font-size: 16px;
                    line-height: 24px;
                    width: 150px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                p {
                    font-size: 12px;
                    color: #666;
                    line-height: 22px;
                    width: 200px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                .grade {
                    font-weight: 700;
                    color: #faaf00;
                    font-size: 15px;
                }

            }

            .btn_mall {
                width: 60px;
                height: 26px;
                line-height: 26px;
                text-align: center;
                border: 1px solid #faaf00;
                border-radius: 5px;
                color: #faaf00;
                font-size: 12px;
            }
        }
    }
}
</style>